<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智教慧学 - 学生个人中心</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 自定义Tailwind配置：主题色、动画 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4361ee',
                        secondary: '#b5179e',
                        accent: '#3f37c9',
                        neutral: '#f8f9fa',
                        dark: '#2d3748'
                    },
                    fontFamily: {
                        sans: ['Microsoft YaHei', 'Segoe UI', 'sans-serif'],
                    },
                    animation: {
                        'float': 'float 3s ease-in-out infinite',
                        'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                        'gradient-x': 'gradient-x 8s ease infinite',
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-10px)' },
                        },
                        'gradient-x': {
                            '0%, 100%': { backgroundPosition: '0% 50%' },
                            '50%': { backgroundPosition: '100% 50%' },
                        }
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            /* 自定义工具类 */
            .content-auto {
                content-visibility: auto;
            }
            .text-gradient {
                background-clip: text;
                -webkit-background-clip: text;
                color: transparent;
            }
            .bg-glass {
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-8px);
                box-shadow: 0 20px 25px -5px rgba(67, 97, 238, 0.15), 0 8px 10px -6px rgba(181, 23, 158, 0.1);
            }
            .progress-bar {
                background: linear-gradient(90deg, #4361ee, #b5179e);
                background-size: 200% 200%;
                animation: gradient-x 8s ease infinite;
                transition: width 1s cubic-bezier(0.65, 0, 0.35, 1);
            }
            /* 返回首页按钮样式 */
            .back-home {
                color: #4361ee;
                font-size: 1em;
                cursor: pointer;
                padding: 6px 12px;
                border-radius: 8px;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .back-home:hover {
                background-color: rgba(67, 97, 238, 0.1);
                transform: translateX(-2px);
            }
        }
    </style>
</head>
<body class="bg-neutral font-sans text-dark min-h-screen">
    <!-- 顶部导航栏：添加返回首页功能 -->
    <header class="sticky top-0 z-50 bg-white/90 bg-glass shadow-md">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <!-- 平台Logo和返回首页按钮 -->
            <div class="flex items-center gap-4">
                <div class="back-home" onclick="window.location.href='shouye.html'">
                    <i class="fa fa-arrow-left mr-1"></i> 返回首页
                </div>
                <div class="flex items-center gap-2">
                    <div class="w-10 h-10 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center text-white">
                        <i class="fa fa-graduation-cap text-xl"></i>
                    </div>
                    <h1 class="text-xl font-bold text-gradient bg-gradient-to-r from-primary to-secondary">智教慧学</h1>
                </div>
            </div>

            <!-- 导航菜单 -->
            <nav class="hidden md:flex items-center gap-8">
                <a href="#dashboard" class="font-medium text-primary border-b-2 border-primary px-1 py-2">仪表盘</a>
                <a href="#courses" class="font-medium text-dark hover:text-primary transition-colors">我的课程</a>
                <a href="#homework" class="font-medium text-dark hover:text-primary transition-colors">作业中心</a>
                <a href="#mistakes" class="font-medium text-dark hover:text-primary transition-colors">错题本</a>
                <a href="#ai-study" class="font-medium text-dark hover:text-primary transition-colors">AI学伴</a>
            </nav>

            <!-- 学生信息 -->
            <div class="flex items-center gap-3">
                <div class="hidden md:block text-right">
                    <p class="font-medium">张三</p>
                    <p class="text-xs text-gray-500">八年级(2)班 | 学号：20230802</p>
                </div>
                <div class="w-10 h-10 rounded-full overflow-hidden border-2 border-gradient bg-gradient-to-r from-primary to-secondary">
                    <img src="https://picsum.photos/id/64/200/200" alt="学生头像" class="w-full h-full object-cover">
                </div>
                <!-- 移动端菜单按钮 -->
                <button class="md:hidden text-dark text-xl">
                    <i class="fa fa-bars"></i>
                </button>
            </div>
        </div>
    </header>

    <main class="container mx-auto px-4 py-8">
        <!-- 1. 学习仪表盘：数据可视化+快速入口 -->
        <section id="dashboard" class="mb-12">
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold">学习仪表盘</h2>
                <div class="flex gap-3 mt-4 md:mt-0">
                    <button class="px-4 py-2 rounded-full bg-primary/10 text-primary text-sm font-medium hover:bg-primary/20 transition-colors">
                        <i class="fa fa-calendar-o mr-1"></i> 本周计划
                    </button>
                    <button class="px-4 py-2 rounded-full bg-secondary/10 text-secondary text-sm font-medium hover:bg-secondary/20 transition-colors">
                        <i class="fa fa-bar-chart mr-1"></i> 学习报告
                    </button>
                </div>
            </div>

            <!-- 数据卡片：网格布局+动态效果 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <!-- 课程进度卡片 -->
                <div class="bg-white rounded-2xl shadow-lg p-6 card-hover">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <p class="text-gray-500 text-sm">本周课程进度</p>
                            <h3 class="text-2xl font-bold mt-1">75%</h3>
                        </div>
                        <div class="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center text-primary">
                            <i class="fa fa-book text-xl"></i>
                        </div>
                    </div>
                    <div class="w-full h-2 bg-gray-100 rounded-full overflow-hidden">
                        <div class="progress-bar h-full rounded-full" style="width: 75%"></div>
                    </div>
                    <p class="text-xs text-gray-500 mt-2">已完成 6/8 节课 | 剩余 2 节</p>
                </div>

                <!-- 作业完成卡片 -->
                <div class="bg-white rounded-2xl shadow-lg p-6 card-hover">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <p class="text-gray-500 text-sm">未完成作业</p>
                            <h3 class="text-2xl font-bold mt-1">2 份</h3>
                        </div>
                        <div class="w-12 h-12 rounded-xl bg-secondary/10 flex items-center justify-center text-secondary">
                            <i class="fa fa-pencil text-xl"></i>
                        </div>
                    </div>
                    <div class="flex gap-2 mt-3">
                        <span class="px-2 py-1 bg-red-100 text-red-600 text-xs rounded-full">数学 | 今日截止</span>
                        <span class="px-2 py-1 bg-yellow-100 text-yellow-600 text-xs rounded-full">英语 | 明日截止</span>
                    </div>
                </div>

                <!-- 测验得分卡片 -->
                <div class="bg-white rounded-2xl shadow-lg p-6 card-hover">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <p class="text-gray-500 text-sm">最近测验平均分</p>
                            <h3 class="text-2xl font-bold mt-1">88 分</h3>
                        </div>
                        <div class="w-12 h-12 rounded-xl bg-accent/10 flex items-center justify-center text-accent">
                            <i class="fa fa-line-chart text-xl"></i>
                        </div>
                    </div>
                    <div class="flex items-center gap-2 mt-3">
                        <i class="fa fa-arrow-up text-green-500"></i>
                        <p class="text-sm text-gray-600">较上次提升 5 分</p>
                    </div>
                </div>

                <!-- 学习时长卡片 -->
                <div class="bg-white rounded-2xl shadow-lg p-6 card-hover">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <p class="text-gray-500 text-sm">本周学习时长</p>
                            <h3 class="text-2xl font-bold mt-1">12.5 小时</h3>
                        </div>
                        <div class="w-12 h-12 rounded-xl bg-green-100 flex items-center justify-center text-green-500">
                            <i class="fa fa-clock-o text-xl"></i>
                        </div>
                    </div>
                    <div class="flex items-center gap-2 mt-3">
                        <i class="fa fa-check-circle text-green-500"></i>
                        <p class="text-sm text-gray-600">达到目标时长（10小时）</p>
                    </div>
                </div>
            </div>

            <!-- 近期学习动态：时间轴 -->
            <div class="bg-white rounded-2xl shadow-lg p-6 mt-6">
                <h3 class="text-lg font-bold mb-4">近期学习动态</h3>
                <div class="space-y-6">
                    <div class="flex gap-4">
                        <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary shrink-0">
                            <i class="fa fa-download"></i>
                        </div>
                        <div>
                            <p class="font-medium">下载了数学《一次函数》课件</p>
                            <p class="text-xs text-gray-500">2025-09-28 09:30</p>
                        </div>
                    </div>
                    <div class="flex gap-4">
                        <div class="w-10 h-10 rounded-full bg-secondary/10 flex items-center justify-center text-secondary shrink-0">
                            <i class="fa fa-check"></i>
                        </div>
                        <div>
                            <p class="font-medium">完成语文《背影》作业提交</p>
                            <p class="text-xs text-gray-500">2025-09-27 18:45</p>
                        </div>
                    </div>
                    <div class="flex gap-4">
                        <div class="w-10 h-10 rounded-full bg-accent/10 flex items-center justify-center text-accent shrink-0">
                            <i class="fa fa-play"></i>
                        </div>
                        <div>
                            <p class="font-medium">观看物理《电路实验》视频课（80%）</p>
                            <p class="text-xs text-gray-500">2025-09-26 16:20</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 2. 我的课程：支持下载 -->
        <section id="courses" class="mb-12">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold">我的课程</h2>
                <div class="relative">
                    <input type="text" placeholder="搜索课程..." class="pl-10 pr-4 py-2 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 w-48 md:w-64">
                    <i class="fa fa-search absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
                </div>
            </div>

            <!-- 课程列表：卡片布局 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- 数学课程卡片 -->
                <div class="bg-white rounded-2xl shadow-lg overflow-hidden card-hover">
                    <div class="relative h-40">
                        <img src="https://picsum.photos/id/24/600/400" alt="数学课程封面" class="w-full h-full object-cover">
                        <div class="absolute top-3 left-3 bg-primary text-white text-xs px-2 py-1 rounded-full">
                            进行中
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h3 class="text-lg font-bold">八年级数学（上）</h3>
                            <span class="text-xs text-gray-500">6课时/周</span>
                        </div>
                        <p class="text-gray-600 text-sm mb-4">涵盖一次函数、全等三角形、轴对称等核心知识点，配套虚拟实验与分层作业。</p>
                        <div class="flex justify-between items-center">
                            <div class="flex items-center gap-2">
                                <img src="https://picsum.photos/id/64/100/100" alt="李老师" class="w-8 h-8 rounded-full">
                                <span class="text-sm">李老师</span>
                            </div>
                            <div class="flex gap-2">
                                <button class="px-3 py-1.5 rounded-lg bg-primary/10 text-primary text-sm hover:bg-primary/20 transition-colors">
                                    <i class="fa fa-download mr-1"></i> 资料
                                </button>
                                <button class="px-3 py-1.5 rounded-lg bg-dark text-white text-sm hover:bg-dark/80 transition-colors">
                                    <i class="fa fa-play mr-1"></i> 学习
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 语文课程卡片 -->
                <div class="bg-white rounded-2xl shadow-lg overflow-hidden card-hover">
                    <div class="relative h-40">
                        <img src="https://picsum.photos/id/42/600/400" alt="语文课程封面" class="w-full h-full object-cover">
                        <div class="absolute top-3 left-3 bg-primary text-white text-xs px-2 py-1 rounded-full">
                            进行中
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h3 class="text-lg font-bold">八年级语文（上）</h3>
                            <span class="text-xs text-gray-500">4课时/周</span>
                        </div>
                        <p class="text-gray-600 text-sm mb-4">以散文、记叙文阅读为核心，强化写作技巧训练，配套名家朗诵音频与拓展阅读材料。</p>
                        <div class="flex justify-between items-center">
                            <div class="flex items-center gap-2">
                                <img src="https://picsum.photos/id/65/100/100" alt="王老师" class="w-8 h-8 rounded-full">
                                <span class="text-sm">王老师</span>
                            </div>
                            <div class="flex gap-2">
                                <button class="px-3 py-1.5 rounded-lg bg-primary/10 text-primary text-sm hover:bg-primary/20 transition-colors">
                                    <i class="fa fa-download mr-1"></i> 资料
                                </button>
                                <button class="px-3 py-1.5 rounded-lg bg-dark text-white text-sm hover:bg-dark/80 transition-colors">
                                    <i class="fa fa-play mr-1"></i> 学习
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 英语课程卡片 -->
                <div class="bg-white rounded-2xl shadow-lg overflow-hidden card-hover">
                    <div class="relative h-40">
                        <img src="https://picsum.photos/id/96/600/400" alt="英语课程封面" class="w-full h-full object-cover">
                        <div class="absolute top-3 left-3 bg-gray-500 text-white text-xs px-2 py-1 rounded-full">
                            未开始
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h3 class="text-lg font-bold">八年级英语（上）</h3>
                            <span class="text-xs text-gray-500">5课时/周</span>
                        </div>
                        <p class="text-gray-600 text-sm mb-4">聚焦时态语法与口语交际，配套情景对话视频、听力训练音频与单词背诵工具。</p>
                        <div class="flex justify-between items-center">
                            <div class="flex items-center gap-2">
                                <img src="https://picsum.photos/id/119/100/100" alt="张老师" class="w-8 h-8 rounded-full">
                                <span class="text-sm">张老师</span>
                            </div>
                            <div class="flex gap-2">
                                <button class="px-3 py-1.5 rounded-lg bg-gray-200 text-gray-500 text-sm cursor-not-allowed">
                                    <i class="fa fa-download mr-1"></i> 资料
                                </button>
                                <button class="px-3 py-1.5 rounded-lg bg-gray-200 text-gray-500 text-sm cursor-not-allowed">
                                    <i class="fa fa-play mr-1"></i> 学习
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 课程资料下载区 -->
            <div class="bg-white rounded-2xl shadow-lg p-6 mt-8">
                <h3 class="text-lg font-bold mb-4 flex items-center">
                    <i class="fa fa-cloud-download text-primary mr-2"></i> 最近下载的课程资料
                </h3>
                <div class="overflow-x-auto">
                    <table class="w-full min-w-[600px]">
                        <thead>
                            <tr class="border-b border-gray-200">
                                <th class="text-left py-3 px-4 text-sm font-medium text-gray-500">资料名称</th>
                                <th class="text-left py-3 px-4 text-sm font-medium text-gray-500">所属课程</th>
                                <th class="text-left py-3 px-4 text-sm font-medium text-gray-500">文件类型</th>
                                <th class="text-left py-3 px-4 text-sm font-medium text-gray-500">文件大小</th>
                                <th class="text-left py-3 px-4 text-sm font-medium text-gray-500">下载时间</th>
                                <th class="text-left py-3 px-4 text-sm font-medium text-gray-500">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                                <td class="py-3 px-4 text-sm">一次函数知识点总结.pdf</td>
                                <td class="py-3 px-4 text-sm">八年级数学（上）</td>
                                <td class="py-3 px-4 text-sm"><span class="px-2 py-0.5 bg-red-100 text-red-600 text-xs rounded">PDF</span></td>
                                <td class="py-3 px-4 text-sm">2.4MB</td>
                                <td class="py-3 px-4 text-sm">2025-09-28 09:30</td>
                                <td class="py-3 px-4 text-sm">
                                    <button class="text-primary hover:text-primary/80 mr-3">
                                        <i class="fa fa-download"></i> 重新下载
                                    </button>
                                    <button class="text-gray-500 hover:text-gray-700">
                                        <i class="fa fa-trash"></i> 删除
                                    </button>
                                </td>
                            </tr>
                            <tr class="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                                <td class="py-3 px-4 text-sm">全等三角形习题集.docx</td>
                                <td class="py-3 px-4 text-sm">八年级数学（上）</td>
                                <td class="py-3 px-4 text-sm"><span class="px-2 py-0.5 bg-blue-100 text-blue-600 text-xs rounded">Word</span></td>
                                <td class="py-3 px-4 text-sm">1.8MB</td>
                                <td class="py-3 px-4 text-sm">2025-09-27 14:15</td>
                                <td class="py-3 px-4 text-sm">
                                    <button class="text-primary hover:text-primary/80 mr-3">
                                        <i class="fa fa-download"></i> 重新下载
                                    </button>
                                    <button class="text-gray-500 hover:text-gray-700">
                                        <i class="fa fa-trash"></i> 删除
                                    </button>
                                </td>
                            </tr>
                            <tr class="hover:bg-gray-50 transition-colors">
                                <td class="py-3 px-4 text-sm">《背影》课文朗读.mp3</td>
                                <td class="py-3 px-4 text-sm">八年级语文（上）</td>
                                <td class="py-3 px-4 text-sm"><span class="px-2 py-0.5 bg-green-100 text-green-600 text-xs rounded">音频</span></td>
                                <td class="py-3 px-4 text-sm">8.7MB</td>
                                <td class="py-3 px-4 text-sm">2025-09-26 11:20</td>
                                <td class="py-3 px-4 text-sm">
                                    <button class="text-primary hover:text-primary/80 mr-3">
                                        <i class="fa fa-download"></i> 重新下载
                                    </button>
                                    <button class="text-gray-500 hover:text-gray-700">
                                        <i class="fa fa-trash"></i> 删除
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>

        <!-- 3. 作业中心：填写+修改 -->
        <section id="homework" class="mb-12">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold">作业中心</h2>
                <div class="flex gap-3">
                    <button class="px-4 py-2 rounded-full bg-primary/10 text-primary text-sm font-medium hover:bg-primary/20 transition-colors">
                        <i class="fa fa-list mr-1"></i> 全部作业
                    </button>
                    <button class="px-4 py-2 rounded-full bg-red-100 text-red-600 text-sm font-medium hover:bg-red-200 transition-colors">
                        <i class="fa fa-exclamation-circle mr-1"></i> 待完成(2)
                    </button>
                </div>
            </div>

            <!-- 作业标签切换 -->
            <div class="flex border-b border-gray-200 mb-6">
                <button class="px-4 py-2 text-primary font-medium border-b-2 border-primary">待完成</button>
                <button class="px-4 py-2 text-gray-500 hover:text-dark transition-colors">已提交</button>
                <button class="px-4 py-2 text-gray-500 hover:text-dark transition-colors">已批改</button>
                <button class="px-4 py-2 text-gray-500 hover:text-dark transition-colors">已过期</button>
            </div>

            <!-- 待完成作业列表 -->
            <div class="space-y-6">
                <!-- 数学作业：可填写 -->
                <div class="bg-white rounded-2xl shadow-lg overflow-hidden card-hover">
                    <div class="bg-gradient-to-r from-primary to-accent p-4 text-white">
                        <div class="flex justify-between items-center">
                            <h3 class="font-bold">数学作业：一次函数应用题（A层）</h3>
                            <span class="text-xs bg-white/20 px-2 py-1 rounded-full">今日 23:59 截止</span>
                        </div>
                        <p class="text-sm opacity-90 mt-1">八年级数学（上）| 李老师 | 需在截止前提交，逾期将扣分</p>
                    </div>
                    <div class="p-6">
                        <div class="mb-4">
                            <h4 class="font-medium mb-2">作业要求：</h4>
                            <p class="text-sm text-gray-600">1. 完成下列5道应用题，要求写出解题步骤；<br>2. 第3题需绘制函数图像（可手绘后拍照上传）；<br>3. 提交方式：在线填写+文件上传。</p>
                        </div>

                        <!-- 在线答题区域 -->
                        <div class="space-y-6">
                            <div>
                                <p class="font-medium text-sm mb-2">1. 已知一次函数y=2x+b的图像经过点(1,3)，求b的值及该函数与x轴的交点坐标。</p>
                                <textarea placeholder="请在此处输入解题过程..." class="w-full p-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 text-sm h-24"></textarea>
                            </div>
                            <div>
                                <p class="font-medium text-sm mb-2">2. 某商店销售某种商品，每件成本为30元，售价为x元（x>30），每月销售量为(100-x)件，求每月利润y与售价x的函数关系式，并求售价为多少时利润最大。</p>
                                <textarea placeholder="请在此处输入解题过程..." class="w-full p-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 text-sm h-24"></textarea>
                            </div>
                            <div>
                                <p class="font-medium text-sm mb-2">3. 绘制函数y=-x+4的图像，并求出该函数与两坐标轴围成的三角形面积。（可手绘后拍照上传）</p>
                                <textarea placeholder="请在此处输入解题过程..." class="w-full p-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 text-sm h-24 mb-2"></textarea>
                                <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center">
                                    <label class="cursor-pointer">
                                        <input type="file" hidden accept="image/*">
                                        <div class="flex flex-col items-center">
                                            <i class="fa fa-cloud-upload text-2xl text-gray-400 mb-2"></i>
                                            <p class="text-sm text-gray-500">点击上传图片（支持JPG/PNG格式）</p>
                                            <p class="text-xs text-gray-400 mt-1">最大文件大小：10MB</p>
                                        </div>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- 作业操作按钮 -->
                        <div class="flex justify-end gap-3 mt-6">
                            <button class="px-4 py-2 border border-gray-300 rounded-lg text-gray-600 text-sm hover:bg-gray-50 transition-colors">
                                <i class="fa fa-save mr-1"></i> 保存草稿
                            </button>
                            <button class="px-4 py-2 bg-primary text-white rounded-lg text-sm hover:bg-primary/90 transition-colors">
                                <i class="fa fa-paper-plane mr-1"></i> 提交作业
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 英语作业：可修改（已保存草稿） -->
                <div class="bg-white rounded-2xl shadow-lg overflow-hidden card-hover">
                    <div class="bg-gradient-to-r from-secondary to-pink-500 p-4 text-white">
                        <div class="flex justify-between items-center">
                            <h3 class="font-bold">英语作业：Unit 3 单词拼写与句型转换</h3>
                            <span class="text-xs bg-white/20 px-2 py-1 rounded-full">明日 18:00 截止</span>
                        </div>
                        <p class="text-sm opacity-90 mt-1">八年级英语（上）| 张老师 | 已保存草稿，可继续编辑</p>
                    </div>
                    <div class="p-6">
                        <div class="mb-4">
                            <h4 class="font-medium mb-2">作业要求：</h4>
                            <p class="text-sm text-gray-600">1. 根据音标写出单词，并标注词性；<br>2. 将下列5个句子改为一般疑问句；<br>3. 提交后可修改1次。</p>
                        </div>

                        <!-- 在线答题区域（含草稿内容） -->
                        <div class="space-y-6">
                            <div>
                                <p class="font-medium text-sm mb-2">1. 根据音标写出单词并标注词性：/ˈhæpɪ/ _______ (_______)</p>
                                <input type="text" value="happy (形容词)" class="w-full p-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 text-sm">
                            </div>
                            <div>
                                <p class="font-medium text-sm mb-2">2. 将句子 "She usually walks to school." 改为一般疑问句。</p>
                                <input type="text" value="Does she usually walk to school?" class="w-full p-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 text-sm">
                            </div>
                            <div>
                                <p class="font-medium text-sm mb-2">3. 录制单词朗读音频（Unit 3 所有单词）</p>
                                <div class="border border-gray-200 rounded-lg p-4 flex flex-col items-center">
                                    <button class="w-12 h-12 rounded-full bg-secondary/10 flex items-center justify-center text-secondary mb-2">
                                        <i class="fa fa-microphone text-xl"></i>
                                    </button>
                                    <p class="text-sm text-gray-500">点击麦克风开始录制（最长3分钟）</p>
                                    <div class="mt-3 flex items-center gap-3">
                                        <audio controls class="w-full">
                                            <source src="#" type="audio/mpeg">
                                            您的浏览器不支持音频播放
                                        </audio>
                                        <button class="text-red-500 hover:text-red-700">
                                            <i class="fa fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 作业操作按钮 -->
                        <div class="flex justify-end gap-3 mt-6">
                            <button class="px-4 py-2 border border-gray-300 rounded-lg text-gray-600 text-sm hover:bg-gray-50 transition-colors">
                                <i class="fa fa-save mr-1"></i> 更新草稿
                            </button>
                            <button class="px-4 py-2 bg-secondary text-white rounded-lg text-sm hover:bg-secondary/90 transition-colors">
                                <i class="fa fa-paper-plane mr-1"></i> 提交作业
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 4. 错题本：基于需求文档补充 -->
        <section id="mistakes" class="mb-12">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold">错题本</h2>
                <button class="px-4 py-2 rounded-full bg-primary/10 text-primary text-sm font-medium hover:bg-primary/20 transition-colors">
                    <i class="fa fa-filter mr-1"></i> 按学科筛选
                </button>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- 错题统计卡片 -->
                <div class="bg-white rounded-2xl shadow-lg p-6 card-hover">
                    <h3 class="text-lg font-bold mb-4">错题统计</h3>
                    <div class="space-y-4">
                        <div>
                            <div class="flex justify-between items-center mb-1">
                                <span class="text-sm">数学</span>
                                <span class="text-sm font-medium">28 道</span>
                            </div>
                            <div class="w-full h-2 bg-gray-100 rounded-full overflow-hidden">
                                <div class="progress-bar h-full rounded-full" style="width: 65%"></div>
                            </div>
                        </div>
                        <div>
                            <div class="flex justify-between items-center mb-1">
                                <span class="text-sm">物理</span>
                                <span class="text-sm font-medium">15 道</span>
                            </div>
                            <div class="w-full h-2 bg-gray-100 rounded-full overflow-hidden">
                                <div class="progress-bar h-full rounded-full" style="width: 40%"></div>
                            </div>
                        </div>
                        <div>
                            <div class="flex justify-between items-center mb-1">
                                <span class="text-sm">英语</span>
                                <span class="text-sm font-medium">12 道</span>
                            </div>
                            <div class="w-full h-2 bg-gray-100 rounded-full overflow-hidden">
                                <div class="progress-bar h-full rounded-full" style="width: 30%"></div>
                            </div>
                        </div>
                        <div>
                            <div class="flex justify-between items-center mb-1">
                                <span class="text-sm">语文</span>
                                <span class="text-sm font-medium">8 道</span>
                            </div>
                            <div class="w-full h-2 bg-gray-100 rounded-full overflow-hidden">
                                <div class="progress-bar h-full rounded-full" style="width: 20%"></div>
                            </div>
                        </div>
                    </div>
                    <button class="w-full mt-6 py-2 rounded-lg bg-primary text-white text-sm hover:bg-primary/90 transition-colors">
                        <i class="fa fa-refresh mr-1"></i> 生成错题练习卷
                    </button>
                </div>

                <!-- 最近添加的错题 -->
                <div class="bg-white rounded-2xl shadow-lg p-6 lg:col-span-2 card-hover">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="text-lg font-bold">最近添加的错题</h3>
                        <span class="text-xs text-gray-500">共 63 道错题</span>
                    </div>
                    <div class="space-y-4 max-h-[400px] overflow-y-auto pr-2 custom-scrollbar">
                        <!-- 错题1 -->
                        <div class="border-b border-gray-100 pb-4">
                            <div class="flex justify-between items-start mb-2">
                                <span class="text-sm font-medium">数学 | 一次函数</span>
                                <span class="text-xs bg-red-100 text-red-600 px-2 py-0.5 rounded-full">未掌握</span>
                            </div>
                            <p class="text-sm mb-2">已知一次函数y=kx+b（k≠0）的图像经过点A(2,3)和点B(-1,-3)，求该函数的表达式。</p>
                            <div class="flex gap-3 mt-2">
                                <button class="text-primary text-sm hover:text-primary/80">
                                    <i class="fa fa-book mr-1"></i> 查看解析
                                </button>
                                <button class="text-secondary text-sm hover:text-secondary/80">
                                    <i class="fa fa-pencil mr-1"></i> 重新做题
                                </button>
                                <button class="text-gray-500 text-sm hover:text-gray-700">
                                    <i class="fa fa-trash mr-1"></i> 删除
                                </button>
                            </div>
                        </div>
                        <!-- 错题2 -->
                        <div class="border-b border-gray-100 pb-4">
                            <div class="flex justify-between items-start mb-2">
                                <span class="text-sm font-medium">物理 | 电路故障</span>
                                <span class="text-xs bg-yellow-100 text-yellow-600 px-2 py-0.5 rounded-full">待复习</span>
                            </div>
                            <p class="text-sm mb-2">在串联电路中，闭合开关后灯泡不亮，电流表无示数，电压表有示数且接近电源电压，故障可能是（ ）</p>
                            <div class="flex gap-3 mt-2">
                                <button class="text-primary text-sm hover:text-primary/80">
                                    <i class="fa fa-book mr-1"></i> 查看解析
                                </button>
                                <button class="text-secondary text-sm hover:text-secondary/80">
                                    <i class="fa fa-pencil mr-1"></i> 重新做题
                                </button>
                                <button class="text-gray-500 text-sm hover:text-gray-700">
                                    <i class="fa fa-trash mr-1"></i> 删除
                                </button>
                            </div>
                        </div>
                        <!-- 错题3 -->
                        <div class="border-b border-gray-100 pb-4">
                            <div class="flex justify-between items-start mb-2">
                                <span class="text-sm font-medium">英语 | 时态语法</span>
                                <span class="text-xs bg-green-100 text-green-600 px-2 py-0.5 rounded-full">已掌握</span>
                            </div>
                            <p class="text-sm mb-2">She _______ (study) English for 5 years by the end of last year.（用所给词的适当形式填空）</p>
                            <div class="flex gap-3 mt-2">
                                <button class="text-primary text-sm hover:text-primary/80">
                                    <i class="fa fa-book mr-1"></i> 查看解析
                                </button>
                                <button class="text-secondary text-sm hover:text-secondary/80">
                                    <i class="fa fa-pencil mr-1"></i> 重新做题
                                </button>
                                <button class="text-gray-500 text-sm hover:text-gray-700">
                                    <i class="fa fa-trash mr-1"></i> 删除
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 5. AI学伴：基于需求文档补充 -->
        <section id="ai-study" class="mb-12">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold">AI学伴</h2>
                <p class="text-sm text-gray-500">支持语音、文字、图像交互，为你解答学习疑问</p>
            </div>

            <div class="bg-white rounded-2xl shadow-lg overflow-hidden">
                <!-- AI学伴头部 -->
                <div class="bg-gradient-to-r from-primary to-secondary p-4 text-white flex items-center gap-4">
                    <div class="w-12 h-12 rounded-full bg-white/20 flex items-center justify-center animate-pulse-slow">
                        <i class="fa fa-robot text-xl"></i>
                    </div>
                    <div>
                        <h3 class="font-bold">小慧（AI学伴）</h3>
                        <p class="text-xs opacity-90">你可以问我数学题、英语语法，或者让我讲解知识点</p>
                    </div>
                </div>

                <!-- 聊天区域 -->
                <div class="p-6 h-[400px] overflow-y-auto space-y-6 pr-2 custom-scrollbar">
                    <!-- AI回复 -->
                    <div class="flex gap-3">
                        <div class="w-8 h-8 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center text-white shrink-0">
                            <i class="fa fa-robot text-xs"></i>
                        </div>
                        <div class="bg-gray-100 rounded-lg rounded-tl-none px-4 py-3 max-w-[80%]">
                            <p class="text-sm">你好！我是你的AI学伴小慧，有什么学习问题可以问我哦～比如“一次函数怎么求解析式”或者“一般过去时和现在完成时的区别”。</p>
                        </div>
                    </div>

                    <!-- 用户提问 -->
                    <div class="flex gap-3 justify-end">
                        <div class="bg-primary/10 rounded-lg rounded-tr-none px-4 py-3 max-w-[80%]">
                            <p class="text-sm">一次函数y=kx+b的图像经过点(0,2)和(1,3)，求k和b的值</p>
                        </div>
                        <div class="w-8 h-8 rounded-full overflow-hidden shrink-0">
                            <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="w-full h-full object-cover">
                        </div>
                    </div>

                    <!-- AI回复 -->
                    <div class="flex gap-3">
                        <div class="w-8 h-8 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center text-white shrink-0">
                            <i class="fa fa-robot text-xs"></i>
                        </div>
                        <div class="bg-gray-100 rounded-lg rounded-tl-none px-4 py-3 max-w-[80%]">
                            <p class="text-sm font-medium mb-2">解题步骤如下：</p>
                            <p class="text-sm mb-1">1. 代入点(0,2)：当x=0时，y=2，代入y=kx+b得：</p>
                            <p class="text-sm mb-1">   2 = k×0 + b → <strong>b=2</strong></p>
                            <p class="text-sm mb-1">2. 代入点(1,3)和b=2：当x=1时，y=3，代入得：</p>
                            <p class="text-sm mb-1">   3 = k×1 + 2 → k=3-2=1 → <strong>k=1</strong></p>
                            <p class="text-sm mt-2">所以，该一次函数的表达式为 <strong>y=x+2</strong>。需要我再讲解类似题目吗？</p>
                        </div>
                    </div>
                </div>

                <!-- 输入区域 -->
                <div class="p-4 border-t border-gray-200">
                    <div class="flex gap-3">
                        <button class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 hover:bg-gray-200 transition-colors">
                            <i class="fa fa-camera"></i>
                        </button>
                        <button class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 hover:bg-gray-200 transition-colors">
                            <i class="fa fa-microphone"></i>
                        </button>
                        <input type="text" placeholder="输入你的问题..." class="flex-1 p-3 border border-gray-200 rounded-full focus:outline-none focus:ring-2 focus:ring-primary/30 text-sm">
                        <button class="w-10 h-10 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center text-white hover:opacity-90 transition-colors">
                            <i class="fa fa-paper-plane"></i>
                        </button>
                    </div>
                    <div class="flex justify-center gap-4 mt-3">
                        <button class="text-xs text-gray-500 hover:text-primary transition-colors">一次函数解题技巧</button>
                        <button class="text-xs text-gray-500 hover:text-primary transition-colors">英语作文模板</button>
                        <button class="text-xs text-gray-500 hover:text-primary transition-colors">物理实验步骤</button>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-8">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center mb-6">
                <div class="flex items-center gap-2 mb-4 md:mb-0">
                    <div class="w-10 h-10 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center text-white">
                        <i class="fa fa-graduation-cap text-xl"></i>
                    </div>
                    <h2 class="text-xl font-bold">智教慧学全景云平台</h2>
                </div>
                <div class="flex gap-6">
                    <a href="#" class="text-white/70 hover:text-white transition-colors">
                        <i class="fa fa-question-circle mr-1"></i> 帮助中心
                    </a>
                    <a href="#" class="text-white/70 hover:text-white transition-colors">
                        <i class="fa fa-shield mr-1"></i> 隐私政策
                    </a>
                    <a href="#" class="text-white/70 hover:text-white transition-colors">
                        <i class="fa fa-file-text-o mr-1"></i> 用户协议
                    </a>
                </div>
            </div>
            <div class="border-t border-white/10 pt-6 text-center text-white/50 text-sm">
                <p>版权所有 © 智教慧学全景云平台 2025 | 京ICP备12345678号</p>
            </div>
        </div>
    </footer>

    <!-- 自定义滚动条样式 -->
    <style>
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 10px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #a1a1a1;
        }
    </style>

    <!-- 交互脚本：模拟动态效果 -->
    <script>
        // 模拟进度条动态加载
        document.addEventListener('DOMContentLoaded', () => {
            const progressBars = document.querySelectorAll('.progress-bar');
            progressBars.forEach(bar => {
                const width = bar.style.width;
                bar.style.width = '0';
                setTimeout(() => {
                    bar.style.width = width;
                }, 300);
            });

            // 模拟卡片hover效果增强
            const cards = document.querySelectorAll('.card-hover');
            cards.forEach(card => {
                card.addEventListener('mouseenter', () => {
                    card.style.boxShadow = '0 20px 25px -5px rgba(67, 97, 238, 0.15), 0 8px 10px -6px rgba(181, 23, 158, 0.1)';
                });
                card.addEventListener('mouseleave', () => {
                    card.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)';
                });
            });

            // 导航菜单点击交互
            const navLinks = document.querySelectorAll('nav a');
            navLinks.forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    // 移除所有激活状态
                    navLinks.forEach(item => {
                        item.classList.remove('text-primary', 'border-b-2', 'border-primary');
                        item.classList.add('text-dark', 'hover:text-primary');
                    });
                    // 添加当前激活状态
                    this.classList.remove('text-dark', 'hover:text-primary');
                    this.classList.add('text-primary', 'border-b-2', 'border-primary');
                    // 滚动到对应内容
                    const targetId = this.getAttribute('href');
                    const targetElement = document.querySelector(targetId);
                    if (targetElement) {
                        targetElement.scrollIntoView({
                            behavior: 'smooth'
                        });
                    }
                });
            });
        });
    </script>
</body>
</html>
